<template>
	<div class="home-box">
		<el-container class="home-content">
			<el-aside width="200px">
				<el-container class="left-box">
					<template v-if="isbackstage">
						<el-header class="left-header" @click.native="signInBackstage">发才网后台管理系统</el-header>
					</template>

					<template v-if="isbackstagelr">
						<el-header class="left-header typein" @click.native="entering">企业/岗位录入系统</el-header>
					</template>
					<!-- <template v-if="ishousekeep">
				<el-header class="left-header house" @click.native="signInHousekeep">家政后台管理系统</el-header>
			</template>-->
					<template v-if="istelRecruit">
						<el-header class="left-header telphone" @click.native="signInTelRecruit">电话招聘人员系统</el-header>
					</template>


					<!-- <template v-if="isbackstage">
		  	<el-header class="left-header telphone" @click="navTo">发才网可视化数据</el-header>
		  </template> -->
					<el-main class="left-content">
						<el-menu router :default-active="$route.path" background-color="#202931" text-color="#fff"
							active-text-color="#fff" :unique-opened="true" class="aside-pos">
							<template v-for="(item, index) in userinfo.permisstions">
								<el-menu-item :index="item.path" @click="handleOpen(item.power, item)"
									:class="{ textActive: userinfo.account == 'fcwlhyg' || userinfo.account == 'wechatManager' || userinfo.permisstions.length < 10 }">
									<el-container slot="title" class="aside-list">
										<!-- 消息气泡 -->
										<!-- <el-badge :hidden="false" :value="12" class="item"> -->
										{{ item.powername }}
										<!-- </el-badge> -->
									</el-container>
									<img :src="item.url"
										v-show="userinfo.account != 'fcwlhyg' && userinfo.account != 'wechatManager' && userinfo.permisstions.length > 10"
										alt width="20px" height="20px">

								</el-menu-item>
							</template>
						</el-menu>
					</el-main>
				</el-container>
			</el-aside>
			<el-container class="right-box">
				<el-header class="right-header">
					<div class="right-header-left" v-if="userinfo.grade === '11'">
						<el-select v-model="value" :disabled="options.length === 1" @change="switchStores">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="right-header-content">
						<div class="avatar" @click="changePwdFlag = true">
							<img src="../assets/img/vendor.png">
							<span>{{ userinfo.username }}</span>
						</div>
						<div class="logout" @click="logoutBtn">
							<img src="../assets/img/logout.png">
							<span>退出登录</span>
						</div>
					</div>
				</el-header>
				<el-dialog :visible.sync="changePwdFlag" width="30%" center>
					<div class="headimg">
						<img width="40px" src="../assets/img/vendor.png" alt>
						<p>{{ userinfo.username }}</p>
					</div>
					<ul class="userInfo clearfix">
						<li v-if="userinfo.type == 'telRecruit'">
							<span class="infoLabel">姓名 :</span>
							<span class="infoText">{{ userinfo.name }}</span>
						</li>
						<li v-if="userinfo.type != 'telRecruit'">
							<span class="infoLabel">工号 :</span>
							<span class="infoText">{{ userinfo.account }}</span>
						</li>
						<li>
							<span class="infoLabel">电话 :</span>
							<span class="infoText">{{ userinfo.type == 'housekeep' ? userinfo.phone : userinfo.telnum }}</span>
						</li>
						<li v-if="userinfo.type == 'telRecruit'">
							<span class="infoLabel">账号 :</span>
							<span class="infoText">{{ userinfo.account }}</span>
						</li>
						<li v-if="userinfo.type != 'telRecruit'">
							<span class="infoLabel">部门 :</span>
							<span class="infoText">{{ userinfo.position }}</span>
						</li>
						<li v-if="userinfo.type != 'telRecruit'">
							<span class="infoLabel">岗位 :</span>
							<span class="infoText">{{ userinfo.department }}</span>
						</li>
					</ul>
					<div slot="footer" class="dialog-footer">
						<el-button @click="changePwd" class="btn">修改密码</el-button>
					</div>
				</el-dialog>
				<div class="bread" v-show="historyData.length>0">
				 <p class="breadItem" v-for="(data,index) in historyData"  @click="goPage(data)" :key="index" :class="{breadItemActive:data.check}">{{data.powername}}
					<span  @click.stop="closeTarget(data)"   class="el-icon-circle-close delICon"  style="color: black;"   ></span>
				</p>
				  </div>
			 
				<el-main class="right-content">
					<transition name="fade"  mode="out-in">
					<router-view  ></router-view>
				</transition>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script src="./home.js">
</script>

<style>
.aside-list {
	display: inline-block;
}

.aside-pos .el-badge__content.is-fixed {
	top: 50%;
	right: 8px;
}

.aside-list .el-badge__content.is-fixed {
	top: 50%;
	right: -8px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
   
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.bread {

  
  padding: 8px 0;
   
}
.delICon {
	position: absolute;
	top: -3px;
    right: -8px
}
.breadItem {
	width: auto;
	position: relative;
	overflow: hidden;	
text-overflow:ellipsis;
white-space: nowrap;
	display: inline-block;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
    height: 35px;
    line-height: 28px;
    border: 1px solid #D2D2D2;
    border-radius: 10px;
	padding: 4px 10px ;
	margin: 2px 10px
}
.breadItemActive{
	background-color: #409EFF;
	color: white;
	font-family: pingfang;
}
</style>
<style scoped src="./home.css">

</style>
